<template>
    <div :id="Id" class="editor" spellcheck="false" tabindex="1"
      @keydown="changed" >
      <slot></slot>
    </div>
</template>

<script>
// 卡片编辑器
// 最简单的编辑器
import CardEditor from "./js/cardeditor.js"

const getRandom = function () { return String(Math.random()).slice(2, 12) }

export default {
  data() {
    return {
      editor: null,
      editorId: "",
      content: "", // 文本内容
    }
  },
  props: {
    "text":{
      type: String
    }
  },
  computed: {
    Id() {
      return this.editorId
    }
  },
  methods:{
    // 将 html 转换成对应编码，之后将会直接保存
    // 这里不需要处理，对应转成 \n
    getText() {
      let text = document.getElementById(this.editorId).innerText
      return text
    },
    // 文件文本发生变化，通知 write 更新标签
    changed() {
      this.$emit('changed')
    }
  },
  created() {
    this.editorId = "_Editor" + getRandom()
  },
  mounted() {
    const _self = this
    this.editor = new CardEditor(this.editorId, (html)=>{ _self.content = html })
  }
}

</script>
<style lang="scss">
.editor{
  border:none;
  min-height:80vh;
  outline:none;
  font-family: "Microsoft YaHei";
  font-size: 16px;
  color: #363636;
  padding: 15px;
  word-wrap: break-word;
  word-break: break-all;
  // box-shadow:0px 10px 10px -10px #1116 inset;
  overflow-y: hidden;
}
.editor:hover {
  overflow-y: overlay;
}
</style>